<template>
  <div class="order-list">
    <el-table
      class="el-tab"
      :data="tableData.list"
      style="width: 98%"
      :border="true"
    >
      <el-table-column prop="id" label="序号" width="175" align="center" />
      <el-table-column prop="name" label="订餐人" width="350"  align="center" />
      <el-table-column prop="phone" label="联系电话" width="476" align="center" />
      <el-table-column prop="payment" label="支付(元)" width="334"  align="center" />
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="20"
      :pager-count="5"
    />
    <div class="data">今日明细</div>
  </div>
</template>

<script setup>
import mitt from "../../utils/eventBus";
import axios from "axios";
import { reactive, onMounted, ref } from "vue";
import "../../mock/orderMock";
let tableData = reactive({ list: [] });

onMounted(() => {
  axios.get("/api/order/list").then((res) => {
    tableData.list = res.data.list;
    // 传值
    let num = ref(tableData.list.length);
    let totalPrice = ref(0);
    tableData.list.map((item)=>{
      totalPrice.value += item.payment/1;
    })
    mitt.emit("personNum", num.value);
    mitt.emit("totalPrice", totalPrice.value);
  });
});
</script>

<style scoped>
.order-list {
  position: relative;
  margin-bottom: 500px;
}

.el-tab {
  margin: 60px 0 0 20px;
}
.data {
  position: absolute;
  width: 141px;
  height: 41px;
  background: rgba(204, 0, 0, 0.807843137254902);
  color: #fff;
  text-align: center;
  line-height: 41px;
  font-weight: bold;
  top: -40px;
  left: 40px;
  border-radius: 5px;
  z-index: 999;
}
</style>